<template>
	<view @click="click" :class="classNames" :style="btnStyle" class="lib-component-btn">
		<slot></slot>
	</view>
</template>

<script>
	/**
	 * @description 按钮
	 * @property {'default' | 'primary' | 'border' | 'danger' | 'success' | 'link' | secondary} type 
	 * @property {'l' | 'm' | 'x'} size 
	 */

	import {
		Theme
	} from "../../utils/theme/theme.js";
	import {
		Utils
	} from "../../utils/utils/utils.js";

	const btnStyle_default = {
		color: '#606266',
		borderColor: '#dcdfe6',
		backgroundColor: '#ffffff',
	};

	export default {
		name: 'lib-btn',
		emit: ['onClick', 'onDisableClick'],
		props: {
			// 'default' | 'primary' | 'border' | 'danger' | 'success' | 'link' | secondary
			type: {
				type: String,
				default: 'default',
				required: false,
			},
			size: {
				type: String,
				default: 'm',
				required: false,
			},
			color: {
				type: String,
				default: '',
				required: false,
			},
			disabled: {
				type: Boolean,
				default: false,
				required: false,
			},
			block: {
				type: Boolean,
				default: false,
				required: false,
			},
			style: {
				type: Object,
				default: () => {
					return {};
				},
				required: false,
			},
		},
		data() {
			return {
				componentId: Utils.getRandomChars(8),
				classNames: [],
				btnStyle: {},
				Theme: Theme,
			}
		},
		methods: {
			setClass() {
				switch (this.type) {
					case 'default':
						this.btnStyle = {
							...btnStyle_default,
							...this.style
						};
						break;
					case 'primary':
						this.btnStyle = {
							...{
								color: '#ffffff',
								borderColor: Theme.theme.primary,
								backgroundColor: Theme.theme.primary,
							},
							...this.style
						};
						break;
					case 'secondary':
						this.btnStyle = {
							...{
								color: '#ffffff',
								borderColor: Theme.theme.secondary,
								backgroundColor: Theme.theme.secondary,
							},
							...this.style
						};
						break;
					case 'border':
						this.btnStyle = {
							...{
								color: Theme.theme.primary,
								borderColor: Theme.theme.primary,
								backgroundColor: Theme.theme.primary9,
							},
							...this.style
						};
						break;
					case 'danger':
						this.btnStyle = {
							...{
								color: Theme.theme.danger,
								borderColor: Theme.theme.danger,
								backgroundColor: Theme.theme.danger9,
							},
							...this.style
						};
						break;
					case 'success':
						this.btnStyle = {
							...{
								color: Theme.theme.success,
								borderColor: Theme.theme.success,
								backgroundColor: Theme.theme.success9,
							},
							...this.style
						};
						break;
					case 'link':
						this.btnStyle = {
							...{
								color: Theme.theme.primary,
								borderColor: 'transparent',
								backgroundColor: 'transparent',
							},
							...this.style
						};
						break;
					default:
						this.btnStyle = {
							...btnStyle_default,
							...this.style
						};
						break;
				}

				this.classNames = [];
				if (this.size === 'l') {
					this.classNames.push('size-l');
				}
				if (this.size === 'm') {
					this.classNames.push('size-m');
				}
				if (this.size === 's') {
					this.classNames.push('size-s');
				}
				if (this.block) {
					this.classNames.push('block');
				}
				if (this.color) {
					if(this.type === 'link'){
						this.btnStyle = {
							...{
								color: this.color,
							},
							...this.style,
						};
					} else {
						this.btnStyle = {
							...{
								borderColor: this.color,
								backgroundColor: this.color
							},
							...this.style,
						};
					}
				}
				if (this.disabled) {
					if(this.type === 'link'){
						this.btnStyle = {
							...{
								color: '#cccccc',
							},
							...this.style,
						};
					} else {
						this.btnStyle = this.style;
						this.classNames.push('disabled');
					}
					
				};
			},
			click(e) {
				e.stopPropagation();
				if (this.disabled) {
					this.$emit('onDisableClick');
				} else {
					this.$emit('onClick');
				}
			}
		},
		created() {
			this.$watch('disabled', function(newValue, oldValue) {
				this.setClass();
			});
		},
		mounted() {
			Theme.themeChange(this.componentId, () => {
				this.setClass();
			});
			this.setClass();
		},
		updated() {},
		destroyed() {
			Theme.delThemeChange(this.componentId);
		},
		unmounted() {
			Theme.delThemeChange(this.componentId);
		},
	}
</script>




<style lang="scss" scoped>
	@import "./lib-btn.scss";
</style>